<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>4/13</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 2px solid blue;
			}
		</style>
	</head>

	<body>
		<div id="answer"></div>
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			let oCanvas = document.getElementById('canvas');

			console.dir(oCanvas);

			let oPen = oCanvas.getContext("2d");

			//strokeText() 绘制描边文本
			//font
			//font-style  font-weight  font-size  font-family
			//normal->默认     italic->斜体     oblique->倾斜的字体
			
			let str = "2021/04/13 课堂练习";
			/*oPen.font = "italic bold 50px 楷体";
			oPen.strokeStyle = "aqua";
			oPen.strokeText(str, 5, 70);
			oPen.fillStyle = "coral";
			oPen.fillText(str, 5, 70);*/

			/*myText(oPen, "2021/04/13", "left");

			function myText(oPen, str, type) {
				oPen.font = "italic bold 50px 楷体";
				oPen.strokeStyle = "aqua";
				let textWidth = oPen.measureText(str).width;
				let x=0;
				if(type == "center") {
					//居中
					 x = (500 - textWidth) / 2.0;
					oPen.strokeText(str, x, 50);
				}
				else if(type == "right") {
					//右对齐
					 x = 500 - textWidth;
					oPen.strokeText(str, x-10, 50);
				}
				if(type == "left") {
					//左对齐
					 x = 0;
					oPen.strokeText(str, x, 50);
				}
			}*/

			//text-align
			//left  right  center
			oPen.strokeStyle = "aqua";
			oPen.font = "italic bold 50px 楷体";
			oPen.fillStyle = "coral";
			oPen.textAlign = "center";
			oPen.fillText(str, 250, 50);
			oPen.strokeText(str, 250, 50);

		}
	</script>
	</body>

</html>